<script setup>
import {mySiderBarIcon} from '@/views/NewScreenShare/Asset.js'
import {onMounted} from "vue";

const iconsArr = ref(mySiderBarIcon)

console.log(iconsArr.value)

function siderBarIconsClick(item, $event) {
  console.log($event.target.parentNode)
  
}
</script>

<template>
  <div class="box-border card-left w-1/14 h-full  ">
    <div class=" bg-gray-100 w-full h-full rounded-lg">
      <!--        图标-->
      <div class="flex flex-col-reverse items-center pt-10">
        <div v-for="item in iconsArr" :key="item" ref="siderBariconRef"
             class="m-2 w-10 h-10 pt-0.5  leading-10 rounded-full bg-gray-200 text-center hover:bg-blue-500 *:hover:text-white   transition-all  ease-in-out delay-80"

             @click="siderBarIconsClick(item,$event)">
          <span :class="item" class=" textNoActiveStyle group-hover:text-white"></span>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>
.textNoActiveStyle {
  @apply text-gray-400 w-2/5 h-8 leading-9
}

</style>